[면접준비] 웹

개발자 면접질문과 답변들. 더 많은 내용은 깃허브 저장소에서 확인할 수 있습니다 (https://github.com/jeonyeohun/GetReadyForInterview)

상태유지와 인증을 위한 기술들

세션과 쿠키를 사용하는 이유와 두 방식의 차이를 설명해보세요.

  • 쿠키와 세션 모두 stateless 한 http 통신의을 보완하기 위해 사용합니다. 쿠키나 세션에 이전에 작업했던 정보를 저장하면 http 연결이 다시 설정되어도 이전 정보를 계속해서 사용할 수 있습니다.
  • 쿠키는 클라이언트 브라우저에 저장되지만 세션은 서버에 저장된다는 점에서 차이가 있습니다.

많은 사용자가 사용하는 서비스는 쿠키와 세션 중에 어떤 방법을 선택해야 할까요?

  • 세션은 정보를 서버측에 저장하기 때문에 사용자가 많으면 많을 수록 서버의 메모리 사용량이 증가하게 됩니다. 따라서 쿠키를 사용하는 것이 적합합니다.

쿠키와 세션의 라이프 사이클은 어때요?

  • 쿠키는 만료시간을 설정해서 해당시간이 지나면 더 이상 쿠키정보를 사용할 수 없게합니다. 반면에 세션은 서버와 통신하던 브라우저가 종료되면 곧바로 삭제됩니다.

로컬스토리지와 세션스토리지를 설명해보세요.

  • 로컬스토리지와 세션스토리지는 모두 웹 스토리지로 쿠키와 세션과는 달리 서버의 개입없이 브라우저에서만 관리될 수 있는 저장공간입니다. 쿠키는 매 요청마다 쿠키를 담아서 서버에 전송해야한다는 차이가 있습니다.

로컬스토리지와 세션스토리지의 차이를 설명해보세요.

  • 로컬스토리지는 브라우저를 닫거나 브라우저 탭을 닫아도 저장한 데이터가 유지되지만 세션스토리지는 세션을 만들었던 브러우저 창을 닫게되면 저장했던 정보도 함께 사라집니다.

JWT로 로그인을 구현하는 방법에 대해서 설명해보세요.

  • 사용자는 서버에 로그인을 하고 서버는 클라이언트에게 Access Token을 발급합니다.
  • 클라이언트는 발급받은 토큰을 클라이언트 저장소에 저장합니다.
  • 클라이언트는 서버에 요청을 보낼 때 항상 Access Token 포함하여 요청을 보냅니다.
  • 서버는 요청을 받을 때마다 전달받은 Access Token이 유효한지 검사하하는 작업을 거칩니다.

OAuth 와 동작과정을 설명해보세요.

  • OAuth는 서드파티 애플리케이션 사용하기 위한 인증과 권한부여를 돕는 프레임워크입니다.
  • 클라이언트는 Resource Owner 에게 권한을 요청합니다.
  • Resource Owner가 클라이언트를 허가하면 Authorization Grant 를 클라이언트에게 전송합니다.
  • 클라이이언트는 Authorization Server 에 Authorization Grant 를 전송하여 자원이 있는 서버에 인증할 수 있는 Access Token 을 발급받습니다.
  • Access Token을 발급받은 클라이언트는 실제 자원이 있는 Resource Server에 토큰과 함께 요청을 보내고 서버는 토큰을 검증한 뒤 요청에 대한 응답을 전송합니다.

웹 보안

DoS 와 DDoS의 차이를 말해보세요.

  • DoS는 한 대의 공격 서버가 대상 서버에 악성 패킷을 보내 공격하는 것을 말합니다. 이를 차단하기 위해 공격을 받은 서버는 해당 패킷을 보낸 서버를 차단하는 것으로 공격을 막을 수 있습니다.
  • DDoS는 서버가 공격을 차단할 수 없도록 하기위해 분산된 여러서버에서 동시다발적으로 대상 서버에 악성 패킷을 보내 공격을 수행하는 것을 말합니다. 다수의 서버가 패킷을 보내기 때문에 공격에 쉽게 대응할 수 없습니다.

CORS 정책에 대해서 설명해보세요.

  • CORS 는 Cross Origin Resouce Sharing의 약자로 서로 다른 Origin끼리의 리소스 공유를 제한하는 정책입니다. Origin 이란 프로토콜, 호스트, 포트를 합친 식별자를 의미합니다. 다른 Origin 끼리의 리소스 공유를 항상 허용하면 신뢰되지 않은 사이트로부터 악성스크립트나 리소스를 받아오게 될 수 있어 이를 보완하기 위해 브라우저의 기본정책으로 사용합니다.

CORS의 동작과정을 설명해보세요.

  • 클라이언트가 서버에 요청을 보낼 때, 브라우저는 Preflight 를 먼저 서버로 보냅니다. preflight 에는 요청을 보내는 클라이언트의 origin 정보가 들어있습니다.
  • 서버는 preflight 를 받은 뒤 자신이 가지고 있는 Acess-Control-Allow-Origin 을 응답합니다. 이곳에는 서버가 리소스 공유를 허용하는 origin 들이 명시되어 있습니다.
  • 브라우저는 요청을 보냈을 때의 origin 과 Acess-Control-Allow-Origin 의 origin 을 비교한 뒤 일치하는 origin 이 있다면 본 요청을 서버로 보냅니다.

CSRF에 대해서 설명해보세요

  • CSRF 는 Cross Site Request Forgery로 특정 호스트의 권한을 사용하여 위조된 요청을 전송하는 공격방법입니다.
  • 공격자는 CSRF 악성코드가 포함된 스크립트를 메일이나 게시글을 통해 등록하고, 사용자가 이 게시글이나 메일을 열람하게되면 스크립트가 실행되며 해당 사용자가 가진 권한으로 악성 요청이 서버에 전송됩니다.

CSRF를 막을 수 있는 방법을 말해보세요.

  • 가장 대표적인 방법은 Referrer 검증입니다. 서버가 요청을 받았을 때 헤더의 referrer 를 확인하여 정상적인 도메인에서 온 요청인지 확인합니다.
  • 또한 토큰을 통해서 요청의 유효성을 검증하거나 CAPCHA와 같은 도구를 사용하여 사용자가 직접 요청을 수행해야하도록 하는 것으로 방지할 수 있습니다.

XSS에 대해서 설명해보세요.

  • XSS 는 Cross Site Scripting 으로 사용자가 악성 스크립트를 실행하게끔 입력폼을 전송하거나 URL을 노출하는 공격방법입니다. 악성 스크립트가 실행되면 브라우저에 저장된 개인정보를 탈취하거나 클라이언트 시스템을 공격하게됩니다.

XSS를 막을 수 있는 방법을 말해보세요.

  • XSS는 스크립트를 실행하여 공격을 수행하는 방식이기 때문에 서버로 들어오는 입력중 script 태그를 포함하는 문자열을 필터링하는 것으로 막을 수 있습니다.

CSRF 와 XSS 의 차이는 뭘까요 그럼?

  • 두 공격방법 모두 악성 스크립트를 실행하게 하는 방식이지만 CSRF 클라이언트를 통해 서버를 공격하는 방법이고, XSS는 클라이언트를 공격하는 방법입니다.

SQL 인젝션이 무엇인지 설명하고 방지법을 말해보세요.

  • SQL 인젝션은 입력에 의도적으로 SQL 구문을 삽입하여 서버에 요청을 보내고, 서버에 전달된 SQL 구문이 데이터베이스를 조작하게되는 공격방법입니다.
  • XSS와 마찬가지로 SQL 문법을 입력값에서 필터링하는 것으로 방지할 수 있습니다.

렌더링

브라우저가 렌더링을 수행하는 과정을 설명해보세요

  • 먼저 브라우저는 HTML 파서로 전달받은 HTML을 파싱하고 DOM 트리를 생성합니다.
  • HTML 문서를 읽던 중 link 태그를 만나 CSS 파일을 읽게되면 CSS 파서로 CSSOM 트리를 생성합니다.
  • HTML 문서를 읽던 중 script 태그를 만나 스크립트 코드를 읽어야하면, 파싱을 중단하고 JS 엔진을 실행하여 코드를 파싱하고 실행합니다.
  • 최종적으로는 만들어진 DOM 트리와 CSSOM 트리를 연결시켜 렌더 트리를 생성합니다.
  • 렌더트리가 만들어지면 UI 백엔트에서는 트리의 내용에 따라 화면을 그립니다.

CSR과 SSR의 차이를 설명해보세요.

  • 서버사이드 렌더링은 서버가 렌더링을 완료하고 완성된 HTML을 브라우저에게 반환하는 방식입니다. 새로고침이 될 때마다 서버로부터 리소스를 새롭게 전달받아야합니다.
  • 클라이언트 사이드 렌더링은 웹 서버가 최초에 비어있는 HTML을 브라우저에게 전송합니다. 브라우저는 JS파일을 다운로드 받고 화면을 구성합니다.
  • 클라이언트 사이드 렌더링은 페이지를 구성하는데 필요한 모든 리소스를 가지고 있기 때문에 초기 로딩 속도가 오래걸린다는 단점과 비어있는 HTML 때문에 javascript를 크롤링하지 않는 검색엔진에 취약하지만 높은 사용자 경험을 제공한다는 장점이 있습니다. 반면에 서버사이드 렌더링은 필요한 부분만을 응답받아 초기 페이지 로딩속도가 빠르지만 페이지에 변화가 발생할 때마다 모든 화면을 다시 렌더링하기 때문에 사용자 경험이 비교적 떨어진다는 단점이 있습니다.

Written by@전여훈 (Click Me!)
고민이 담긴 코드를 만들자, 고민하기 위해 공부하자.